<template>
  <div class="menu-wrapper">
    <el-form ref="shopForm" :model="form" label-width="100px">
      <div
        style="
          width: 100%;
          display: flex;
          align-items: flex-end;
          border-bottom: 1px #eee solid;
          margin-bottom: 20px;
        "
      >
        <span style="font-size: 18px; color: #409eff; margin: 10px 0"
          >添加景区信息</span
        >
      </div>
      <el-form-item label="景区名称" prop="name">
        <el-col :span="8">
          <el-input v-model="form.name" />
        </el-col>
      </el-form-item>

       <div class="secific">
        <el-form-item label="具体位置" prop="lat">
          <el-col :span="12">
            <el-button type="primary" round @click="mapShowFn"
              ><i class="el-icon-map-location" /> 点击选择定位</el-button
            >
          </el-col>
        </el-form-item>
      </div>
           <el-form-item label="所在区" prop="areaId">
        <el-col :span="8">
          <Distpicker
            :province="district.province"
            :city="district.city"
            :area="district.area"
            @selected="onSelected"
          />
        </el-col>
      </el-form-item>

      <div class="second" style="display: flex">
        <el-form-item label="缩略图">
          <single-upload style="width: 145px" v-model="form.thumbnail" />
        </el-form-item>
<!--        <el-form-item label="副标题" prop="subTitle" class="subTitle">-->
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入副标题"
              v-model="form.subTitle"
              style="width: 250px;height: 200px"
            >
            </el-input>
      </div>

      <el-form-item label="营业时间" prop="openingHours">
        <el-col :span="8">
          <el-input v-model="form.openingHours" />
        </el-col>
      </el-form-item>





      <el-form-item label="景区介绍" prop="content">
        <el-col :span="8">
          <div class="el-form-item__content">
            <tinymce v-model="form.content" :height="300" :width="950" />
          </div>
          <!-- <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.content"></el-input> -->
        </el-col>
      </el-form-item>

      <div class="photo-content">
        <div style="margin-top: 20px" class="photo-content-span">
          <span style="font-size: 18px; color: #409eff">轮播图</span>
        </div>

          <multi-upload v-model="form.scenicMeta.images" />

      </div>

      <el-row>
        <div class="video-content">
          <div style="margin-top: 20px" class="video-content-span">
            <span style="font-size: 18px; color: #409eff; margin: 10px 0"
              >视频介绍</span
            >
          </div>

            <video-upload v-model="form.scenicMeta.video" />

        </div>
      </el-row>

       <div class="complete">
       <el-form-item>
        <el-button
          type="primary"
          :loading="clicked"
          @click="saveshop('shopForm')"
          >&nbsp&nbsp完 成&nbsp&nbsp</el-button
        >
      </el-form-item>
       </div>




    </el-form>
    <el-dialog
      title="请选择具体位置"
      :visible.sync="mapShow"
      top="5vh"
      width="800px"
      :before-close="handleClose"
    >
      <Map :initcenter="[form.lng, form.lat]" @getMap="getMap" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="mapShow = false">取 消</el-button>
        <el-button type="primary" @click="savelngLat">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped>
.complete{
    margin-top: 40px;
    margin-left: -60px;
}
.second .el-form-item label {
  text-align: left !important;
}
.menu-wrapper {
  margin: 15px;
}
.photo-content {
  width: 100%;
  /* display: flex;
  align-items: flex-end; */
  margin-left: 50px;
  margin-bottom: 40px;
}
.photo-content .photo-content-span {
  margin-bottom: 20px;
}
/deep/.el-upload__tip {
  display: none;
}
/deep/ .el-upload--picture-card {
  width: 50px !important;
  height: 50px !important;
  line-height: 50px !important;
  text-align: center;
}
.video-content {
  margin-left: 40px;

}
.video-content-span {
  margin-bottom: 20px;
}
.secific {
  margin-top: 30px;
}
.el-form-item__content {
  margin-top: 50px;
  margin-left: -50px;
}
  /deep/.el-textarea__inner{
    height: 150px
  ;
  }
</style>

<script>
import MultiUpload from "@/components/Upload/multiUpload";
import VideoUpload from "@/components/Upload/videoUpload";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import OfficeDialog from "@/components/OfficeDialog";
import { save } from "@/api/scenic";
import Distpicker from "@/components/Distpicker/Distpicker";
import Map from "@/components/GaodeMap/index";
import { list as sysEmployeeList } from "@/api/sysEmployee";
import Tinymce from "@/components/Tinymce";
import SingleUpload from "@/components/Upload/singleUpload";
export default {
  name: "scenic-add",
  directives: { permission },
  filters: {},
  components: {
    OfficeDialog,
    Distpicker,
    Map,
    MultiUpload,
    VideoUpload,
    Tinymce,
    SingleUpload
  },
  data() {
    return {
      tempLng: "",
      tempLat: "",
      mapShow: false,
      district: {},
      clicked: false, // 按钮防双击
      topName: "",
      memberOptions: [],
      form: {
        id: "",
        name: "", //景区名称
        areaId: "", //所在区
        content: "", //景区介绍
        address: "", // 地址
        lng: "", // 经度
        lat: "", // 纬度
        subTitle: "", //副标题
        openingHours: "", //营业时间
        thumbnail: "", //缩略图
        scenicMeta: {
          images: [],
          video: "",
        },
      },
    };
  },
  created() {},
  watch: {
   // 路由地址不变的情况下,如果id变化则重新获取数据
    // $route(newVal, oldVal) {
    //   console.log(newVal);
    //   if (newVal.name == "scenic-add" && newVal.query.id != this.id) {
    //     this.saveshop();
    //   }
    // },
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    mapShowFn() {
      this.mapShow = !this.mapShow;
    },
    getMap(lng, lat, address) {
      console.log(lng, lat);
      console.log(address);
      // 定义变量保存经纬度
      this.district.province = address.addressComponent.province;
      this.district.city = address.addressComponent.city;
      this.district.area = address.addressComponent.district;
      this.form.areaId = address.addressComponent.adcode;
      this.tempLng = lng;
      this.tempLat = lat;
    },
    savelngLat() {
      this.form.lng = this.tempLng;
      this.form.lat = this.tempLat;
      this.mapShow = false;
    },
    onSelected(val) {

      console.log(val);
      if (
        !utils.isNull(val.city) &&
        !utils.isNull(val.area) &&
        !utils.isNull(val.area.code)
      ) {
        this.form.areaId = val.area.code;
        this.form.address =
          val.province.value + val.city.value + val.area.value;
        // this.form.areaName = val.area.value
      }
    },

    saveshop(form) {
      const _this = this;
      this.$refs[form].validate((valid) => {
        if (valid) {
          // 校验表单
          _this.clicked = true;

          console.log(_this.form);
          save(_this.form)
            .then((response) => {
              console.log(response);

              _this.clicked = false;

              EventBus.$emit("scenic-add", response.data);
              _this.$store
                .dispatch("tagsView/delView", _this.$route)
                .then(({ visitedViews }) => {
                  _this.$router.push({
                    path: "/scenic/list",
                  });
                }); // 关闭当前tab回到列表
            })
            .catch((error) => {
              _this.clicked = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
